<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>一键生成随机的地图区域的json</title>
	</head>

	<body>
		<script type="text/javascript" src="js/lib/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/lib/echarts.min.js"></script>
		<script type="text/javascript" src="js/lib/echarts-gl.min.js"></script>
		<script type="text/javascript" src="js/point_util.js"></script>
		<h3 align="center">生成随机的地图区域的geojson</h3>
		<div style="float:left;width: 50%;height: 600px;margin:auto;">
			<table align="center">
				<tr><td colspan="3"><font color="red">注：1.填写的城市必须在geoJson存在2.只内置64部门多余的以数字表示经纬度</font></td></tr>
				<tr>
					<td>GeojsonUrl</td>
					<td><input type="text" id="jsonUrl" name="jsonUrl" value="json/jiaozuo410800.json"></td>
					<td>json的本地路径也可以是http(不支持跨域)</td>
				</tr>
				<tr>
					<td>json城市</td>
					<td><input type="text" name="cityName" id="cityName" value="焦作"></td>
					<td>这个json的名称</td>
				</tr>
				<tr>
					<td>城市名称</td>
					<td><input type="text" name="areaName" id="areaName" value="孟州"></td>
					<td>存在这个json的城市名称</td>
				</tr>
				<tr>
					<td>数量</td>
					<td><input id="areaRandomNum" type="text" name="areaRandomNum" value="20"></td>
					<td>要生成随机地点的数量(超过长度会重复)默认55部门</td>
				</tr>
				<tr>
					<td>经纬度对象:</td>
					<td><input id="geoJsonButton" type="button" value="生成"></td>
					<td></td>
				</tr>
				<tr>
					<td colspan="3">
						<textarea id="content" cols="50" rows="50"></textarea>
					</td>
				</tr>
			</table>
		</div>
		<div style="float: right;width: 50%;height: 600px;margin:auto;">
			<div id="map" style="height: 100%;"></div>
		</div>
		<script>
			/**
			 * 思路 先写生成随机的 geojson 地点  （去除重复），配置一键生成多少个 
			 * 
			 * 然后生成的 geojson  展示在地图中 
			 * 
			 * 后期可以扩展生成真实的geojson数据
			 * 现在的问题 1.是如何生成真正随机的点，然后生成在这个范围内
			 * 			2.如何生成真个范围内的数据
			 * 
			 * 界面    1.确定使用的json地图
			 * 		 2.确认对应的json地图的名称 必须是中文
			 * 		 3.选择一键生成多少个数据，可以勾选是否生成 地区的名称（默认生成55个部门的数据，可以自己修改）
			 * 		 4.可以选择复制	
			 * 			
			 */
			//第一步先生成对应的json
			$(function() {
				var jiaozuoMap = document.getElementById("map");
				var mapChart = echarts.init(jiaozuoMap); //0988d7
				var jsonUrl = "json/" + "jiaozuo410800.json";
				var cityName = "焦作";
				var areaName = "孟州"; //想要生成随机地点的geo数据    //如果查找不到就生成本区域的数据
				var areaRandomNum = 3; //生成随机数的数量
				//默认的部门名称  超出部门的以变量起
				var depNameArr = ["人社局", "公安局", "工商局", "国税局", "卫计委", "交运局", "食品药品监督管理局", "质量技术监督局", "地税局", "住建局", "环保局", "民政局", "司法局", "安监局", "农林局", "文广新局", "行政服务中心", "盐业管理局", "粮食局", "发改委", "水利局", "商务局", "人防办", "畜牧局", "科技局", "财政局", "旅游局", "银监会焦作银监分局孟州办事处", "教育局", "统计局", "法院", "档案局", "移民安置局", "国土资源局", "供销社", "审计局", "体育局", "编办", "烟草专卖局", "气象局", "邮政局", "城管局", "市政府金融办", "人行孟州支行", "农业机械管理局", "市政府法制办", "检察院", "信访局", "监察委", "工信委", "河务局", "机关事务管理局", "市网络经济发展促进中心", "市新闻网络中心", "市文明办", "公共资源交易中心", "信用办", "市残联", "市爱卫办", "市民宗委", "电力公司", "电信公司", "移动公司", "联通公司"];
				var content = ""; //生成的内容显示到textarea矿中
				var numberObj = {}; //生成的对象
				//表单的对象
				var $jsonUrl = $("#jsonUrl"),
					$cityName = $("#cityName"),
					$areaName = $("#areaName"),
					$areaRandomNum = $("#areaRandomNum"),
					$content = $("#content");
				$("#geoJsonButton").click(function() { //赋值点击生成的事件
					jsonUrl = getValue($jsonUrl);
					areaName = getValue($areaName);
					areaRandomNum = getValue($areaRandomNum);
					cityName = getValue($cityName);
					//开始获取值
					$.getJSON(jsonUrl, function(result) { //打开就默认生成这个地图
						callback(result);
						map(result); //生成地图
					});
				});

				function getValue(obj) { //传递的时jquery对象
					var value = obj.val();
					if(value == "" || value == undefined || value == null) {
						alert(obj.attr("name") + "不能为空");
					}
					return value;
				}
				//开始获取值
				$.getJSON(jsonUrl, function(result) { //打开就默认生成这个地图
					callback(result);
					map(result); //生成地图
				});
				//执行
				function callback(geoJson) {
					var polygonArr =Array(); //不规则区域数组
					var maxX=0,maxY=0,minX=1000,minY=1000;
					//然后开始执行
					var geoJsonObj = geoJson //$.parseJSON(geoJson);
					var featuresArr = geoJsonObj.features;
					var areaArr = Array(); //区域的array的保存 
					for(var key in featuresArr) {
						var model = featuresArr[key];
						if(model.properties.name.indexOf(areaName) > -1 ||cityName==areaName) { //相同的区域   如果区域相同时生成全部的
							var arr = model.geometry.coordinates; //经纬度的数组
							for(var key2 in arr) {
								var arr2 = arr[key2];
								for(var key3 in arr2) {
									var arr3 = arr2[key3];
									for(var key4 in arr3) {
										var arr4 = arr3[key4];
											//生成 不规则点数组
											var pt=new point();
											pt.x=arr4[0];
											pt.y=arr4[1];
											polygonArr.push(pt);
											areaArr.push(arr3[key4]);
											//获取最高维度， 获取最低维度  获取最东经度  获取最东短经度
											if(arr4[0]>maxX){
												maxX = arr4[0];
											}
											if(arr4[0]<minX){
												minX = arr4[0];
											}
											if(arr4[1]>maxY){
												maxY = arr4[1];
											}
											if(arr4[1]<minY){
												minY = arr4[1];
											}
											
									}
									//现在的数组就是经纬度了
								}
							}
							//添加完成 然后生成在不规则区域内的点 
							
							//添加完成后 生成随机 json
							console.log(polygonArr);
							console.log("maxX="+maxX);
							console.log("minX="+minX);
							console.log("maxY="+maxY);
							console.log("minY="+minY);
							var len = polygonArr.length;
							numberObj={}; //重新为空
							areaArr=[];//暂时清空  不取边界点
							var flagIndex=0;
							for(;;){//无限循环
								var indexX = (Math.random() * (maxX-minX)+minX).toFixed(6); //四舍五入取后六位
								var indexy = (Math.random() * (maxY-minY)+minY).toFixed(6);
									var pt=new point();
											pt.x=indexX;
											pt.y=indexy;
											//判断生成的点是否在区域内
									var flag = PointInPoly(pt,polygonArr);
									if(flag){ 
										areaArr.push([indexX,indexy]);
										flagIndex++;
									}
									if(flagIndex==areaRandomNum){ //如果等于生成的点 则结束
										 break;
									}
							}
							var depNameArrLen = depNameArr.length;  //增加生成长度如果过长，那么进行删除
							for(var i = 0; i < areaRandomNum; i++) {
								if(i>=depNameArrLen){
									numberObj[i] = areaArr[i]; //动态增加对象
								}else{
									numberObj[areaName + depNameArr[i]] = areaArr[i]; //动态增加对象
								}
							}
							//额外生成 中心点
							var centerX = ((maxX+minX)/2).toFixed(6);
							var centerY = ((maxY+minY)/2).toFixed(6);
							numberObj[areaName] = [centerX,centerY];
							//复制给全局变量
							console.log(numberObj); //这个现在可以显示
							//输出对象的json
							$content.val(JSON.stringify(numberObj));
						}
					}
				}

				function map(geoJson) {
					echarts.registerMap(cityName, geoJson);
					var data = Array(); //焦点数组
					for(var key in numberObj) {
						var jiaodian = {};
						jiaodian.name = key;
						jiaodian.value = 60; //先固定大小
						data.push(jiaodian); //增加焦点的显示
					}
					var geoCoordMap = numberObj; //这里放置生成的
					var dataFrom = areaName; //显示的中心点 修改为孟州 '焦作市'
					var series = [{
							name: areaName, //运行的线
							type: 'lines',
							zlevel: 1,
							effect: {
								show: true,
								period: 6,
								trailLength: 0.7,
								color: '#fff',
								symbolSize: 3
							},
							lineStyle: {
								normal: {
									color: '#a6c84c',
									width: 0,
									curveness: 0.2
								}
							},
							data: data.map(function(dataItem) {
								return {
									fromName: dataFrom,
									toName: dataItem.name,
									coords: [
										geoCoordMap[dataItem.name],
										geoCoordMap[dataFrom],
									]
								}
							})
						},
						{
							name: areaName, //运行的线2
							type: 'lines',
							zlevel: 2,
							symbol: ['none', 'arrow'],
							symbolSize: 10,
							effect: {
								show: true,
								period: 6,
								trailLength: 0,

							},
							lineStyle: {
								normal: {
									color: '#a6c84c',
									width: 1,
									opacity: 0.6,
									curveness: 0.2
								}
							},
							data: data.map(function(dataItem) {
								return {
									fromName: dataFrom,
									toName: dataItem.name,
									coords: [ //第一个数据一对多， 第二个数据 多对一
										geoCoordMap[dataItem.name],
										geoCoordMap[dataFrom]
									]
								}
							})
						},
						{
							name: areaName, //显示的点点
							type: 'effectScatter',
							coordinateSystem: 'geo',
							zlevel: 2,
							rippleEffect: {
								scale: 5,
								brushType: 'stroke'
							},
							label: {
								normal: {
									show: true,
									position: 'right',
									formatter: '{b}'
								}
							},
							symbolSize: function(val) {
								return val[2] / 6;
							},
							itemStyle: {
								normal: {
									color: '#a6c84c'
								}
							},
							data: data.map(function(dataItem) {
								return {
									name: dataItem.name,
									value: geoCoordMap[dataItem.name].concat([dataItem.value])
								};
							})
						}
					];
					option = {
						backgroundColor: '', //地图背景颜色 #154e90
						dataRange: {
							min: 0,
							max: 100,
							calculable: true,
							color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
							textStyle: {
								color: '#fff'
							},
							show: true,
							right: 10
						},
						title: {
							text: '模拟生成geojson', //主标题 区县接入情况
							subtext: '', //副标题
							left: 'center',
							textStyle: {
								color: '#fff'
							}
						},
						tooltip: { //提示框组件。
							trigger: 'item', //触发类型
							formatter: '{b0}:\n {c0}', //{a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
						},
						geo: {
							map: cityName,
							center: geoCoordMap[areaName], //当前视角的中心点，用经纬度表示  这个搭配放大 可开始就定位
							zoom: 1, //当前视角的缩放比例。
							scaleLimit: { //滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。
								min: 2,
								max: 10
							},
							label: {
								normal: {
									show: false
								},
								emphasis: {
									show: false
								}
							},
							roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
							/* 	        itemStyle: {
								            normal: {
								                areaColor: 'black',
								                borderColor: '#404a59'
								            },
								            emphasis: {
								                areaColor: '#2a333d'
								            }
								        },
							 */
							label: {
								normal: {
									show: true,
									textStyle: {
										color: '#fff'
									}
								},
								emphasis: {
									textStyle: {
										color: '#fff'
									}
								}
							},
							itemStyle: {
								normal: {
									color: 'rgba(0, 41, 97, 1)', //图形的颜色  
									borderColor: 'rgba(86, 155, 197, 1)', //'rgba(147, 235, 248, 1)', //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
									borderWidth: 2,
									areaColor: {
										type: 'radial',
										x: 0.5,
										y: 0.5,
										r: 0.8,
										colorStops: [{
											offset: 0,
											color: '#3399ff' // 0% 处的颜色  #3399ff 实现一个好的团  rgba(0, 41, 97, 1)
										}, {
											offset: 1,
											color: 'rgba(0, 41, 97, 1)' // 100% 处的颜色
										}],
										globalCoord: false // 缺省为 false
									},
									shadowColor: 'rgba(0, 41, 97, 1)', // 阴影颜色 rgba(128, 217, 248, 1)
									// shadowColor: 'rgba(255, 255, 255, 1)',
									shadowOffsetX: -2,
									shadowOffsetY: 2,
									shadowBlur: 10
								},
								emphasis: { //图形div  的 盒子模型
									areaColor: '#00bfff', //'rgba(70, 144, 196, 1)',//'#389BB7',
									borderWidth: 0,
									/*                     itemStyle:{ //高亮下的图形颜色
									                    	color:'red',
									                    	areaColor :'red'
									                    } */
								}
							},
						},
						series: series
					};
					if(option && typeof option === "object") {
						mapChart.setOption(option, true);
					}
				}
			});
		</script>
	</body>

</html>